<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>listpull</title>
	<link rel="stylesheet" href="../../dist/seedsui.min.css">
	<style>
    .listpull-handler{
        padding: 10px 12px;
    }
	.listpull-handler p,.listpull-handler small{
		pointer-events:none;
	}
	.listpull-left .listpull-button{
		width: 130px;
	}
	.listpull-right .listpull-button{
		width: 80px;
	}
    .read,.unread{
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        font-size: 14px;
        width: 130px;
        height: 100%;

        color: white;
        background-color: #20aeff;
    }
    .read{
        background-color: #d1d1d1;
    }
	</style>
</head>

<body ontouchstart="">
	<header>
		<div class="titlebar">
	        <a class="titlebar-button" href="javascript:back()">
	            <i class="icon icon-arrowleft"></i>
	        </a>
	        <h1 class="titlebar-title">列表拖动</h1>
	    </div>
	</header>
	<article>
		<ul class="listpull" id="ID-ListPull">
			<li class="underline listpull-li" onclick="alert(2)">
				<div class="listpull-left">
					<div class="unread SID-ListBtnRead">未读</div>
				</div>
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                	<input type="button" class="listpull-button button disabled SID-ListBtnTop" value="取消置顶">
                	<input type="button" class="listpull-button button warn SID-ListBtnFav" value="收藏">
                	<input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
				<div class="listpull-left">
					<div class="unread SID-ListBtnRead">未读</div>
				</div>
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                	<input type="button" class="listpull-button button warn SID-ListBtnFav" value="收藏">
                	<input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                	<input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
            <li class="underline listpull-li" onclick="alert(2)">
                <div class="listpull-handler" onclick="alert(1)">
                    <p>列表标题</p>
                    <small>列表内容列表内容</small>
                </div>
                <div class="listpull-right">
                    <input type="button" class="listpull-button button cancel SID-ListBtnDel" value="删除">
                </div>
            </li>
		</ul>
	</article>
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
	<script>
		var view={
            /*=========================
              Model
              ===========================*/
            render:function(){
                var self = this;
                //渲染页面
                this.listPullThreshold=0;
                this.listPullIsRead=null;
                this.listPull=new ListPull("#ID-ListPull",{
                    onClick:function(e){
                        if(e.target.classList.contains("SID-ListBtnDel")){
                            console.log("删除");
                        }else if(e.target.classList.contains("SID-ListBtnFav")){
                            console.log("收藏");
                        }else if(e.target.classList.contains("SID-ListBtnTop")){
                            console.log("置顶");
                        }else if(e.target.classList.contains("SID-ListBtnRead")){
                            console.log("已未读");
                        }
                    },
                    onPull:function(e){
                        var readTarget=e.target.parentNode.querySelector(".SID-ListBtnRead");
                        if(!readTarget)return;
                        if(!self.listPullIsRead){
                            self.listPullIsRead=readTarget.classList.contains("read")?1:-1;
                        }
                        if(e.moveX>87){//切换状态
                            self.listPullThreshold=1;
                        }else if(e.moveX>0 && e.moveX<=87){
                            self.listPullThreshold=-1;
                        }else{
                            self.listPullThreshold=0;
                        }
                        //根据初始状态和临界值判断已未读切换
                        if(self.listPullThreshold===1){
                            if(self.listPullIsRead===1){
                                readTarget.innerHTML="未读";
                                readTarget.classList.remove("read");
                                readTarget.classList.add("unread");
                            }else if(self.listPullIsRead===-1){
                                readTarget.innerHTML="已读";
                                readTarget.classList.remove("unread");
                                readTarget.classList.add("read");
                            }
                        }else if(self.listPullThreshold===-1){
                            if(self.listPullIsRead===-1){
                                readTarget.innerHTML="未读";
                                readTarget.classList.remove("read");
                                readTarget.classList.add("unread");
                            }else if(self.listPullIsRead===1){
                                readTarget.innerHTML="已读";
                                readTarget.classList.remove("unread");
                                readTarget.classList.add("read");
                            }
                        }
                    },
                    onPullEnd:function(e){
                        if(e.moveX>0){//左pull
                            e.hide(e.target);
                            e.break=true;
                        }
                        //清空已未读状态
                        self.listPullIsRead=null;
                    }
                });
                //加载数据
                this.loadData();
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            loadData:function(){

                this._attach();//使用backbone时，此行无用
            },

            /*=========================
              Method
              ===========================*/
            _method:function(){
            },
            
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
            },

            /*=========================
              Event Handler
              ===========================*/
            _onEvent:function(e){
                
            }
        }

        window.addEventListener("load",function(){
            view.render();
        }, false);

		//定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>
